<template>
  <template v-if="getShow">
    <LoginFormTitle class="enter-x" />
    <el-form
    ref="formRef"
    :model="formData"
    :rules="getFormRules"
    class="p-4 enter-x">
      <el-form-item 
      prop="account"
      class="enter-x">
        <el-input
        v-model='formData.account'
       
        :placeholder="t('sys.login.userName')"></el-input>
      </el-form-item>

      <el-form-item
      prop="mobile"
      class="enter-x">
        <el-input
        v-model="formData.mobile"
       
        :placeholder="t('sys.login.mobile')"></el-input>
      </el-form-item>

      <el-form-item
      prop="sms"
      class="enter-x">
        <CountdownInput
         
          v-model:value="formData.sms"
          :placeholder="t('sys.login.smsCode')"/>
      </el-form-item>

      <el-form-item
      class="enter-x">
        <el-button type="primary" @click="handleReset" :loading="loading" :style="{width: '100%'}">{{ t('common.resetText') }}</el-button>
        <el-button type="default" class="mt-4" @click="handleBackLogin" :style="{width: '100%', marginLeft: 0}">{{ t('sys.login.backSignIn') }}</el-button>
      </el-form-item>
    </el-form>
  </template>
</template>
<script lang="ts" setup>
  import { reactive, ref, computed, unref } from 'vue';
  import LoginFormTitle from './LoginFormTitle.vue';
  import { CountdownInput } from '/@/components/CountDown';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useLoginState, useFormRules, LoginStateEnum } from './useLogin';

  const { t } = useI18n();
  const { handleBackLogin, getLoginState } = useLoginState();
  const { getFormRules } = useFormRules();

  const formRef = ref();
  const loading = ref(false);

  const formData = reactive({
    account: '',
    mobile: '',
    sms: '',
  });

  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD);

  async function handleReset() {
    const form = unref(formRef);
    if (!form) return;
    await form.resetFields();
  }
</script>
